<template>
	<view class="">
		<hx-navbar ref="hxnb" :config="config" />
		<!-- 系统消息 -->
		<!-- <view class="time">
			昨天 12:38
		</view> -->
		<view style="display: flex;flex-flow: wrap;">
			<view class="cityTable" v-for="(item,index) in cityType" :key="index"
				:class="cityTindex==index ? 'cityStyle' :''" @click="cityChild(index)">
				{{item}}
			</view>
		</view>
		<u-list>
			<u-list-item class="system" v-for="(item, index) in  systemMessageData" :key="index">
				<view style="color: #1E1E1E;opacity: .3;text-align: right;">{{item.createTime}}</view>
				<view class="flex justify-between align-center" style="margin:auto;width: 100%;"
					@tap.stop="goIndex(item)">
					<view class="flex align-center">
						<image src="../../../static/cliend/system.png" mode="aspectFit"
							style="width: 94rpx;height: 94rpx;border-radius: 50%;">
						</image>
						<view style="width: 540rpx" class="flex justify-between align-center">
							<view>
								<view class="flex justify-between" style="margin-left: 20rpx;">
									<view class="flex">
										<view
											style="color: #1E1E1E;font-size: 32rpx;font-weight:600; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200rpx;">
											{{item.headline}}
										</view>
										<view
											style="width: 152rpx;height: 38rpx;background: #FF801F;border-radius: 20rpx;color: #FFFFFF;font-size: 24rpx;text-align: center;line-height: 38rpx;">
											新的设计图
										</view>
									</view>
								</view>
								<view class="content">
									{{item.information}}
								</view>
							</view>
							<view style="font-size: 32rpx;color: #167EC1;" @click="designDrawing()">
								点击查看
							</view>
						</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					title: '系统消息',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				systemMessageData: [],
				cityType: ['系统消息', '我的图纸', '我的邀请'],
				cityTindex: 0
			}
		},
		created() {
			this.getMessages(1, 10, '')
		},
		methods: {
			// 查看设计图
			designDrawing() {
				this.$tools.goPageNoAuth('/pages/index/designDrawing')
			},
			// 系统消息
			getMessages(num, size, type) {
				let data = {
					pageNo: num,
					pageSize: size,
					sysType: type
				}
				this.$api.systemMessages(data).then((res) => {
					console.log(res, '达瓦达瓦')
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime).slice(5, 16)
					})
					if (num == 1) {
						this.systemMessageData = res.data.result.list
					} else {
						this.systemMessageData = this.projectList.concat(res.data.result.list)
					}
					this.mescroll.endBySize(res.data.result.list.length, res.data.result.total);
					console.log('宋松松2', this.systemMessageData)
				})
			},
			cityChild(e) {
				this.cityTindex = e
				this.getMessages(1, 10, e + 1)
			},
			goIndex(item) {
				if (item.type == 1) this.$tools.goPageNoAuth('/pages/index/systemMessage?data=' + item.id)
				if (item.type == 2) this.$tools.goPageNoAuth('/pages/index/myDrawing?data=' + item.id)
				if (item.type == 3) this.$tools.goPageNoAuth('/pages/index/myInvitation?data=' + item.id)
			}
		}
	}
</script>

<style scoped>
	.time {
		text-align: center;
		font-size: 24rpx;
		font-family: Noto Sans SC-Light, Noto Sans SC;
		font-weight: 300;
		color: #C7C7C7;
		margin: 26rpx 0;
	}

	.system {
		padding: 30rpx;
		width: 690rpx;
		height: 236rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.content {
		margin-left: 20rpx;
		color: #1E1E1E;
		opacity: .3;
		font-size: 28rpx;
		white-space: wrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.cityTable {
		margin-left: 32rpx;
		color: #333333;
		padding: 14rpx 16rpx;
		text-align: center;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.cityStyle {
		font-size: 28rpx;
		background: #492D22;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		color: #fFFFFF !important;

	}
</style>